﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="Tuan.MainPage"
    IsTabStop="false"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Tuan"
    xmlns:common="using:Tuan.Common" 

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <!--Page Resource-->
    <Page.Resources>
        <CollectionViewSource
            x:Name="itemsViewSource"
            Source="{Binding Cities}"/>
    </Page.Resources>

    <!--Bottom App Bar-->
    <Page.BottomAppBar>
        <AppBar x:Name="BottomAppBar1" Padding="10,0,10,0" Background="DarkGreen">
            <Grid>
                <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Center">
                    <Button x:Name="changeCity" Style="{StaticResource MoreAppBarButtonStyle}" Click="AppBarChangeCity_Click" Tag="Edit"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

    <Grid>

        <!--Popup Panel for changing city-->
        <Popup x:Name="PopupPanel" IsOpen="False" Width="630" Height="400" HorizontalAlignment="Center" VerticalAlignment="Center" >
            <Grid Width="630" Height="400" DataContext="{Binding Group}" >
                <Grid.Background>
                    <ImageBrush ImageSource="{Binding Mode=OneWay, Source={StaticResource Background}}"/>
                </Grid.Background>
                <Grid.RowDefinitions>
                    <RowDefinition Height="60"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid Background="DarkGreen">
                    <TextBlock Text="请点击您要切换的城市" Margin="20,0,0,0" VerticalAlignment="Center" FontSize="20" FontFamily="KaiTi"></TextBlock>
                </Grid>
                <GridView
                    x:Name="cityGridView"
                    AutomationProperties.AutomationId="ItemGridView"
                    AutomationProperties.Name="Items In Group"
                    TabIndex="1"
                    Grid.Row="1"
                    Margin="20,40,20,40"
                    ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                    ItemTemplate="{StaticResource Standard250x250ItemTemplate02}"
                    IsItemClickEnabled="True"
                    ItemClick="CityItem_ItemClick">


                    <GridView.ItemContainerStyle>
                        <Style TargetType="FrameworkElement">
                            <Setter Property="Margin" Value="52,0,0,10"/>
                        </Style>
                    </GridView.ItemContainerStyle>
                </GridView>
            </Grid>
        </Popup>

        <!--Page Content-->
        <Grid x:Name="ContentPanel" Style="{StaticResource LayoutRootStyle}">
            <Grid.Background>
                <ImageBrush ImageSource="{Binding Mode=OneWay, Source={StaticResource Background}}"/>
            </Grid.Background>
            <Grid.RowDefinitions>
                <RowDefinition Height="100"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="55" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <StackPanel Grid.Column="1" Orientation="Horizontal">
                    <TextBlock x:Name="PageTitle" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}" FontFamily="KaiTi"></TextBlock>
                    <TextBlock x:Name="CityName" Text="{Binding CityName}" Style="{StaticResource PageHeaderTextStyle}" FontFamily="KaiTi"></TextBlock>
                </StackPanel>
            </Grid>

            <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" Grid.Row="1">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>

                    <!--Left Recommand deals panel-->
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                    </Grid.RowDefinitions>

                    <Button Grid.Row="0" Grid.Column="0" Margin="60,20,0,0" AutomationProperties.Name="Group Title" Content="精品推荐" Style="{StaticResource TextButtonStyle}"/>

                    <Grid Margin="60,10,0,0" Grid.Row="1" Grid.Column="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>

                        <Grid Grid.Column="0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <GridView Grid.Row="0" SelectionMode="None" IsItemClickEnabled="True" ItemClick="Deals_ItemClick"  x:Name="DealPanel_01">
                                <GridViewItem>
                                    <Grid HorizontalAlignment="Left" Width="400" Height="300" DataContext="{Binding RecommandDeal0}">
                                        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                                            <Image Source="{Binding Image}" Stretch="Fill"/>
                                        </Border>
                                        <StackPanel VerticalAlignment="Bottom"  Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                            <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}"   Height="100" Margin="15,0,15,0"/>
                                            <TextBlock x:Name="id_01" Text="{Binding Gid}" Visibility="Collapsed"></TextBlock>
                                        </StackPanel>
                                    </Grid>
                                </GridViewItem>
                            </GridView>

                            <Grid Grid.Row="1">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>

                                <GridView Margin="0,-10,0,0" Grid.Column="0" SelectionMode="None" IsItemClickEnabled="True" ItemClick="Deals_ItemClick" x:Name="DealPanel_02">
                                    <GridViewItem>
                                        <Grid HorizontalAlignment="Left" Width="195" Height="160" DataContext="{Binding RecommandDeal1}">
                                            <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                                                <Image Source="{Binding Image}" Stretch="Fill"/>
                                            </Border>
                                            <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                                <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="65" Margin="15,0,15,0"/>
                                                <TextBlock Name="id_02" Text="{Binding Gid}" Visibility="Collapsed"></TextBlock>
                                            </StackPanel>
                                        </Grid>
                                    </GridViewItem>
                                </GridView>

                                <GridView Margin="0,-10,0,0"  Grid.Column="1" SelectionMode="None" IsItemClickEnabled="True" ItemClick="Deals_ItemClick" x:Name="DealPanel_03">
                                    <GridViewItem>
                                        <Grid HorizontalAlignment="Left" Width="195" Height="160" DataContext="{Binding RecommandDeal2}">
                                            <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                                                <Image Source="{Binding Image}" Stretch="Fill"/>
                                            </Border>
                                            <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                                <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="65" Margin="15,0,15,0"/>
                                                <TextBlock x:Name="id_03" Text="{Binding Gid}" Visibility="Collapsed"></TextBlock>
                                            </StackPanel>
                                        </Grid>
                                    </GridViewItem>
                                </GridView>
                            </Grid>
                        </Grid>

                        <!--The second Column-->
                        <Grid Grid.Column="1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <GridView Grid.Row="0" SelectionMode="None" IsItemClickEnabled="True" ItemClick="Deals_ItemClick" x:Name="DealPanel_04" >
                                <GridViewItem>
                                    <Grid HorizontalAlignment="Left" Width="245" Height="150" DataContext="{Binding RecommandDeal3}">
                                        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                                            <Image Source="{Binding Image}" Stretch="Fill"/>
                                        </Border>
                                        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                            <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="65" Margin="15,0,15,0"/>
                                            <TextBlock x:Name="id_04" Text="{Binding Gid}" Visibility="Collapsed"></TextBlock>
                                        </StackPanel>
                                    </Grid>
                                </GridViewItem>
                            </GridView>

                            <GridView Margin="0,-10,0,0" Grid.Row="1" SelectionMode="None" IsItemClickEnabled="True" ItemClick="Deals_ItemClick" x:Name="DealPanel_05">
                                <GridViewItem>
                                    <Grid HorizontalAlignment="Left" Width="245" Height="310" DataContext="{Binding RecommandDeal4}">
                                        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                                            <Image Source="{Binding Image}" Stretch="Fill"/>
                                        </Border>
                                        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                            <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="65" Margin="15,0,15,0"/>
                                            <TextBlock x:Name="id_05" Text="{Binding Gid}" Visibility="Collapsed"></TextBlock>
                                        </StackPanel>
                                    </Grid>
                                </GridViewItem>
                            </GridView>
                        </Grid>

                        <!--The third Column-->

                        <Grid Grid.Column="2">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <GridView  Grid.Row="0" SelectionMode="None" IsItemClickEnabled="True" ItemClick="Deals_ItemClick">
                                <GridViewItem>
                                    <Grid HorizontalAlignment="Left" Width="150" Height="150"  DataContext="{Binding RecommandDeal5}">
                                        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                                            <Image Source="{Binding Image}" Stretch="Fill"/>
                                        </Border>
                                        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                            <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="65" Margin="15,0,15,0"/>
                                            <TextBlock x:Name="id_06" Text="{Binding Gid}" Visibility="Collapsed"></TextBlock>
                                        </StackPanel>
                                    </Grid>
                                </GridViewItem>
                            </GridView>

                            <GridView Margin="0,-10,0,0" Grid.Row="1" x:Name="DealPanel_07" SelectionMode="None" IsItemClickEnabled="True" ItemClick="Deals_ItemClick" >
                                <GridViewItem>
                                    <Grid HorizontalAlignment="Left" Width="150" Height="150"  DataContext="{Binding RecommandDeal6}">
                                        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                                            <Image Source="{Binding Image}" Stretch="Fill"/>
                                        </Border>
                                        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                            <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="65" Margin="15,0,15,0"/>
                                            <TextBlock x:Name="id_07" Text="{Binding Gid}" Visibility="Collapsed"></TextBlock>
                                        </StackPanel>
                                    </Grid>
                                </GridViewItem>
                            </GridView>

                            <GridView Margin="0,-10,0,0" Grid.Row="2" x:Name="DealPanel_08" SelectionMode="None" IsItemClickEnabled="True" ItemClick="Deals_ItemClick">
                                <GridViewItem>
                                    <Grid HorizontalAlignment="Left" Width="150" Height="150" DataContext="{Binding RecommandDeal7}">
                                        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                                            <Image Source="{Binding Image}" Stretch="Fill"/>
                                        </Border>
                                        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                            <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="65" Margin="15,0,15,0"/>
                                            <TextBlock x:Name="id_08" Text="{Binding Gid}" Visibility="Collapsed"></TextBlock>
                                        </StackPanel>
                                    </Grid>
                                </GridViewItem>
                            </GridView>
                        </Grid>
                    </Grid>

                    <!--Right category group panel-->
                    <Button Click="CategoryButton_Click" Grid.Row="0" Grid.Column="1" Margin="100,10,0,0" AutomationProperties.Name="Group Title" Content="分类预览" Style="{StaticResource TextButtonStyle}"/>

                    <Grid Margin="100,10,100,0" Grid.Row="1" Grid.Column="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"></ColumnDefinition>
                            <ColumnDefinition Width="auto"></ColumnDefinition>
                        </Grid.ColumnDefinitions>

                        <Grid Grid.Column="0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"></RowDefinition>
                                <RowDefinition Height="auto"></RowDefinition>
                            </Grid.RowDefinitions>

                            <GridView Grid.Row="0" x:Name="ShowCategoryGroup" SelectionMode="None" IsItemClickEnabled="True" ItemClick="ShowCategoryGroup_ItemClick">
                                <GridViewItem>
                                    <Grid HorizontalAlignment="Left" Width="310" Height="310" DataContext="{Binding ShowGroup0}">
                                        <Border Background="#FF10C54A" >
                                            <Image Source="{Binding Image}" Stretch="UniformToFill" Width="200" Height="200"/>
                                        </Border>
                                        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                            <TextBlock Text="{Binding Title}"  Height="60"  Margin="50,20,0,0" FontSize="25"/>
                                        </StackPanel>
                                    </Grid>
                                </GridViewItem>
                            </GridView>
                            <Grid Grid.Row="1">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto"></ColumnDefinition>
                                    <ColumnDefinition Width="auto"></ColumnDefinition>
                                </Grid.ColumnDefinitions>

                                <GridView Margin="0,-10,0,0" Grid.Column="0" SelectionMode="None" IsItemClickEnabled="True" ItemClick="ShowCategoryGroup_ItemClick">
                                    <GridViewItem>
                                        <Grid HorizontalAlignment="Left" Width="150" Height="150" DataContext="{Binding ShowGroup1}">
                                            <Border Background="#FF169C5F">
                                                <Image Source="{Binding Image}" Stretch="UniformToFill" Width="100" Height="100"/>
                                            </Border>

                                            <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                                <TextBlock Text="{Binding Title}" Height="30" Margin="25,5,0,0" FontSize="15"/>
                                            </StackPanel>
                                        </Grid>
                                    </GridViewItem>
                                </GridView>
                                <GridView Margin="0,-10,0,0" Grid.Column="1" SelectionMode="None" IsItemClickEnabled="True" ItemClick="ShowCategoryGroup_ItemClick">
                                    <GridViewItem>
                                        <Grid HorizontalAlignment="Left" Width="150" Height="150" Background="#FFDC6897" DataContext="{Binding ShowGroup2}">
                                            <Border>
                                                <Image Source="{Binding Image}" Stretch="UniformToFill" Width="100" Height="100"/>
                                            </Border>

                                            <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                                <TextBlock Text="{Binding Title}" Height="30" Margin="25,5,0,0" FontSize="15"/>
                                            </StackPanel>
                                        </Grid>
                                    </GridViewItem>
                                </GridView>
                            </Grid>

                        </Grid>

                        <Grid Grid.Column="1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"></RowDefinition>
                                <RowDefinition Height="auto"></RowDefinition>
                                <RowDefinition Height="auto"></RowDefinition>
                            </Grid.RowDefinitions>

                            <GridView Grid.Row="0" SelectionMode="None" IsItemClickEnabled="True" ItemClick="ShowCategoryGroup_ItemClick">
                                <GridViewItem>
                                    <Grid HorizontalAlignment="Left" Width="150" Height="150" DataContext="{Binding ShowGroup3}">
                                        <Border Background="#FFA845EC">
                                            <Image Source="{Binding Image}" Stretch="UniformToFill" Width="100" Height="100"/>
                                        </Border>

                                        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                            <TextBlock Text="{Binding Title}" Height="30" Margin="25,5,0,0" FontSize="15"/>
                                        </StackPanel>
                                    </Grid>
                                </GridViewItem>
                            </GridView>
                            <GridView Margin="0,-10,0,0" Grid.Row="1" SelectionMode="None" IsItemClickEnabled="True" ItemClick="ShowCategoryGroup_ItemClick">
                                <GridViewItem Grid.Row="1">
                                    <Grid HorizontalAlignment="Left" Width="150" Height="150" DataContext="{Binding ShowGroup4}">
                                        <Border Background="#FF6292CD">
                                            <Image Source="{Binding Image}" Stretch="UniformToFill" Width="100" Height="100"/>
                                        </Border>

                                        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                            <TextBlock Text="{Binding Title}" Height="30" Margin="25,5,0,0" FontSize="15"/>
                                        </StackPanel>
                                    </Grid>
                                </GridViewItem>
                            </GridView>
                            <GridView Margin="0,-10,0,0" Grid.Row="2" SelectionMode="None" IsItemClickEnabled="True" ItemClick="ShowCategoryGroup_ItemClick">
                                <GridViewItem>
                                    <Grid HorizontalAlignment="Left" Width="150" Height="150" DataContext="{Binding ShowGroup5}">
                                        <Border Background="#FF138923">
                                            <Image Source="{Binding Image}" Stretch="UniformToFill" Width="100" Height="100"/>
                                        </Border>

                                        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                            <TextBlock Text="{Binding Title}" Height="30" Margin="25,5,0,0" FontSize="15"/>
                                        </StackPanel>
                                    </Grid>
                                </GridViewItem>
                            </GridView>
                        </Grid>
                    </Grid>
                </Grid>
            </ScrollViewer>
        </Grid>

        <!--Covered layer for gray backgroud-->
        <Grid>
            <Canvas x:Name="GrayPanel" Background="Gray" Opacity="0.9" Visibility="Visible" Canvas.ZIndex="1">
            </Canvas>

            <Canvas x:Name="LoadingPanel"   HorizontalAlignment="Center" VerticalAlignment="Center" Canvas.ZIndex="2">
                <StackPanel Orientation="Horizontal" Canvas.Left="-130">
                    <ProgressRing Name="progressRing" Visibility="Visible" IsActive="True" Width="80" Height="80"/>
                    <TextBlock Text=" 正在加载数据,请稍候..." FontSize="20" VerticalAlignment="Center"></TextBlock>
                </StackPanel>
            </Canvas>
        </Grid>

    </Grid>
</common:LayoutAwarePage>
